<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue.js/vue.js"></script>
</head>
<body>
    <!-- vue中的事件修饰符：
        prevent： 阻止默认行为
        stop：阻止事件冒泡
        once：事件只触发一次
        capture：使用事件捕获，非冒泡
        self：只有当触发本组件时才会触发效果 
        passive: 事件默认行为立即执行，不用等待事件回调就立即执行
    -->
    <div class="root">
        <h3>修改默认行为</h3>
        <a href="https://www.baidu.com" @click.prevent = "showInfo">百度捏</a>

        <!-- 阻止冒泡 -->
        <div class="button1" @click = "showInfo" style="padding: 10px;">
            <button class="button2" @click.stop = "showInfo">点我</button>
        </div>

        <!-- self -->
        <div class="button1" @click.self = "showInfo" style="padding: 10px;">
            <button class="button2" @click = "showInfo">点我</button>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: ".root",
        methods: {
            showInfo(e){
                //这里希望不要执行默认行为：
                //e.preventDefault();
                alert("我希望不要跳转");
            }
        }
    })
</script>
</html>